
<template name='setting_copy'>
<view class="body">
	<div class="container">
	    <header>
	        <h1>仓库数据复制工具</h1>
	        <p class="subtitle">选择需要复制的数据类型，输入源仓库和目标仓库号码</p>
	    </header>
	    
	    <div class="cards">
	        <div class="card" @click="SettingCopyConfig('CopyFirmHeader','复制分类')">
	            <div class="icon">📊</div>
	            <h3>复制分类</h3>
	            <p>将商品类型数据从一个仓库复制到另一个仓库</p>
	        </div>
	        
	        <div class="card" @click="SettingCopyConfig('CopyFirmGoods','复制商品')">
	            <div class="icon">📦</div>
	            <h3>复制商品</h3>
	            <p>将商品信息数据从一个仓库复制到另一个仓库</p>
	        </div>
	        
	        <div class="card" @click="SettingCopyConfig('CopyFirmLevel','复制价格分组')">
	            <div class="icon">💰</div>
	            <h3>复制价格分组</h3>
	            <p>将价格分组数据从一个仓库复制到另一个仓库</p>
	        </div>
	    </div>
	    
	    <footer>
	        <p>仓库管理系统 &copy; 2023</p>
	    </footer>
	</div>
	
	<!-- 复制类型模态窗口 -->
	<div class="modal" v-if="copyShow">
	    <div class="modal-content">
	        <div class="modal-header">
	            <h3 class="modal-title">{{typeName}}</h3>
	            <button class="close-btn" @click="copyShow=false">&times;</button>
				<!-- × -->
	        </div>
	        <div class="form-group">
	            <label for="type-source">被复制的仓库号码</label>
	            <input type="number" v-model="sourceInput" placeholder="请输入源仓库号码">
	        </div>
	        <div class="form-group">
	            <label for="type-target">欲要复制的仓库号码</label>
	            <input type="number" v-model="targetInput" placeholder="请输入目标仓库号码">
	        </div>
	        <button class="submit-btn" @click="loadUpdate">确定复制</button>
	    </div>
	</div>
</view>
</template>

<script>
	export default{
		name:'setting_copy',
		data(){
			return{
				body:{
					type:'',
					sourceInput:'',
					targetInput:'',
				},
				copyShow:false,
			}
		},
		methods:{
			SettingCopyConfig(type,name){
				this.sourceInput = ''
				this.targetInput = ''
				this.typeName = name
				this.body.type = type
				this.copyShow = true
			},
			loadUpdate(){
				// 验证输入
				if (!this.bodysourceInput.trim() || !this.bodytargetInput.trim()) {
					alert('请输入完整的仓库号码！');
					return;
				}
				var that = this
				that.$common.get_request(
					this.body,
					(res)=>{
						that.$common.showModal('提示',res.msg)
					},()=>{},true,"","请不要关闭此窗口...",0,180000
				);
			},
			
		}
	}
</script>

<style>
	.body {
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 20px;
	}
        
	.container {
		width: 100%;
		max-width: 900px;
		text-align: center;
	}
	
	header {
		margin-bottom: 40px;
	}
        
	h1 {
		color: #2c3e50;
		font-size: 2.5rem;
		margin-bottom: 10px;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
	}
        
	.subtitle {
		color: #7f8c8d;
		font-size: 1.1rem;
	}
        
	.cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 25px;
		margin-bottom: 40px;
	}
        
	.card {
		background: white;
		border-radius: 12px;
		box-shadow: 0 10px 20px rgba(0,0,0,0.08);
		padding: 30px 25px;
		transition: transform 0.3s, box-shadow 0.3s;
		cursor: pointer;
	}
        
	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 15px 30px rgba(0,0,0,0.12);
	}
	
	.icon {
		font-size: 3rem;
		margin-bottom: 15px;
		color: #3498db;
	}
	
	.card h3 {
		color: #2c3e50;
		margin-bottom: 15px;
		font-size: 1.4rem;
	}
	
	.card p {
		color: #7f8c8d;
		line-height: 1.5;
	}
	
	/* 模态窗口样式 */
	.modal {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		z-index: 1000;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	
	.modal-content {
		background: white;
		border-radius: 12px;
		width: 90%;
		max-width: 500px;
		padding: 30px;
		box-shadow: 0 15px 30px rgba(0,0,0,0.2);
		animation: modalFade 0.3s;
	}
	
	@keyframes modalFade {
		from { opacity: 0; transform: translateY(-30px); }
		to { opacity: 1; transform: translateY(0); }
	}
	
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25px;
		padding-bottom: 15px;
		border-bottom: 1px solid #eee;
	}
	
	.modal-title {
		font-size: 1.5rem;
		color: #2c3e50;
		margin: 0;
	}
	
	.close-btn {
		background: none;
		border: none;
		font-size: 1.8rem;
		color: #7f8c8d;
		cursor: pointer;
		transition: color 0.2s;
		margin-left: auto;
		margin-right: 0px;
	}
	
	.close-btn:hover {
		color: #e74c3c;
	}
	
	.form-group {
		margin-bottom: 20px;
		text-align: left;
	}
	
	label {
		display: block;
		margin-bottom: 8px;
		color: #2c3e50;
		font-weight: 600;
	}
	
	input {
		/* width: 100%; */
		padding: 12px 15px;
		border: 1px solid #ddd;
		border-radius: 6px;
		font-size: 1rem;
		transition: border 0.3s;
	}
	
	input:focus {
		outline: none;
		border-color: #3498db;
		box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
	}
	
	.submit-btn {
		background: #3498db;
		color: white;
		border: none;
		border-radius: 6px;
		padding: 12px 25px;
		font-size: 1rem;
		cursor: pointer;
		transition: background 0.3s;
		width: 100%;
		margin-top: 10px;
	}
	
	.submit-btn:hover {
		background: #2980b9;
	}
	
	footer {
		margin-top: 40px;
		color: #7f8c8d;
		font-size: 0.9rem;
	}
	
	@media (max-width: 600px) {
		h1 {
			font-size: 2rem;
		}
		
		.cards {
			grid-template-columns: 1fr;
		}
		
		.modal-content {
			padding: 20px;
		}
	}
</style>
